import React, { memo, useCallback, useEffect, useRef, useState} from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux'
import { getTopBannerAction } from '../../store/actionCreators'
import { Carousel } from 'antd';
import {
  BannerWrapper,
  BannerLeft,
  BannerRight,
  BannerControl
} from './style';

export default memo(function ASTopBanner() {
  //为了记录轮播图下标滚到哪里了
  const [currentIndex, setCurrentIndex] = useState(0)

  //useSelector 进行的是===比较 但里面返回的是一个对象 每一次内存地址都不一样 会重新渲染 所以有弊端 消耗性能
  //解决办法 shallowEqual（进行浅层比较）
  const {topBanners} = useSelector( state => ({
    // topBanners: state.recommend.topBanners 传统取值的方法
    // topBanners:state.recommend.get('topBanners')
    topBanners:state.get('recommend').get('topBanners')
    //下面是简洁语法  getIn里面的参数是可迭代的 
    // topBanners:state.getIn(['recommend'],['topBanners'])
  }),shallowEqual)

  // console.log(topBanners)
  //可以通过hooks 直接拿到dispatch 对象
  //组件和redux关联：获取数据进行操作
  const dispatch = useDispatch()

  //其他的hooks 使用走马灯的函数 需要绑定Carousel的Ref 然后再调用函数bannerRef.current.prev()
  const bannerRef = useRef()
  

  //发送网络请求
  useEffect(() => {
    dispatch(getTopBannerAction());
  }, [dispatch])

  //轮播图切换面板回调函数
  const bannerChange = useCallback((from, to) => {
    setCurrentIndex(to);
  }, [])

  //其他业务逻辑 背景高斯模糊
  const bgImage = topBanners[currentIndex] && (topBanners[currentIndex].imageUrl+"?imageView&blur=40x20")

  return (
    <BannerWrapper bgImage={bgImage}>
      <div className="banner wrap-v2">
        <BannerLeft>
          <Carousel effect="fade" autoplay ref={bannerRef} beforeChange={bannerChange}>
            {
              topBanners.map((item,index) => {
                return (
                  <div className="banner-item" key={item.imageUrl}>
                    <img className='image' src={item.imageUrl} alt={item.typeTitle} />
                  </div>
                )
              })
            }
          </Carousel>
        </BannerLeft>
        <BannerRight></BannerRight>
        <BannerControl>
          <button className='btn left' onClick={e => bannerRef.current.prev()}></button>
          <button className='btn right' onClick={e => bannerRef.current.next()}></button>
        </BannerControl>
      </div>
    </BannerWrapper>
  )
})
